<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="12">
        <a-button type="primary" style="margin-right: 10px;background: #3C67F1;border: none;" @click="add">新增</a-button>
        <a-button type="danger" @click="deleteAll" :disabled="selectedRows.length===0">批量删除</a-button>
      </a-col>
      <a-col :span="12" style="text-align: right; margin-bottom: 20px">
        <a-button icon="export" @click="exportXlsBtn('轮灌组')"
                  style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24" style="margin-bottom: 20px">
        <a-table rowKey='id' :loading="loading" :row-selection="rowSelection" :columns="columns" :data-source="data"
                 bordered>
          <!-- slot-scope="text, record" -->
          <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
          <span slot="action" slot-scope="record, index, indent, expanded">
            <a-button type="primary" @click="editor(index.id)"
                      style="margin-right: 10px;background: #3C67F1;border: none;">修改</a-button>
             <a-popconfirm
               title="是否删除该条数据?"
               ok-text="是"
               cancel-text="否"
               @confirm="deleteSingle(index.id)"
               @cancel="cancel"
             >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
          </span>
        </a-table>
      </a-col>
    </a-row>
    <groupAdd ref="groupAdd"></groupAdd>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    width: 80,
    scopedSlots: {customRender: 'indexRender'}
  },
  {
    title: '灌溉组名称',
    width: 120,
    dataIndex: 'name'
  },
  {
    title: '设备阀门',
    dataIndex: 'deviceNames'
  },
  {
    title: '操作',
    width: 180,
    scopedSlots: {customRender: 'action'}
  }
]
import groupAdd from './groupAdd'
import {groupList, single, all, exportXls} from '@/api/meteorological'

export default {
  data() {
    return {
      data: [],
      columns,
      selectedRows: [],
      loading: true,
      exportUrl: '/fabr/fabrIrrigationGroup/exportXls'
    }
  },
  components: {
    groupAdd
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
        }
      }
    }
  },
  mounted() {
    this.dataList()
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    editor(id) {
      this.$refs.groupAdd.modal2Visible = true
      this.$refs.groupAdd.id = id
      this.$refs.groupAdd.spin = true
      this.$refs.groupAdd.title = '编辑轮灌组'
      this.$refs.groupAdd.editList()
      this.$refs.groupAdd.submit.disabled = false
    },
    // 取消
    cancel() {
      this.$message.success('已取消');
    },
    // 删除所有
    deleteAll() {
      let that = this

      this.$confirm({
        title: '是否删除所有数据?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          that.loading = true
          let ids = that.selectedRows.map(item => {
            return item.id
          }).join(',')
          all(ids).then(res => {
            that.dataList()
            that.$message.success('删除成功');
            that.loading = false
          }).catch(err => {
            that.$message.success('已取消');
            that.loading = false
          })
        },
        onCancel() {
          that.$message.success('已取消');
        },
      });
    },
    // 删除单个
    deleteSingle(id) {
      single(id).then(res => {
        this.dataList()
        this.$message.success('删除成功');
      }).catch(err => {
      })
    },
    // 添加事件
    add() {
      this.$refs.groupAdd.modal2Visible = true
      this.$refs.groupAdd.spin = true
      this.$refs.groupAdd.getMock()
      this.$refs.groupAdd.name = ''
      this.$refs.groupAdd.submit.disabled = false
      this.$refs.groupAdd.title = '新增轮灌组'
    },
    // 数据获取
    dataList() {
      groupList().then(res => {
        this.data = res.result.records
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    }
  }
}
</script>